<template>
  <div>
    <div class="el-select"
         @click.stop="open">
      <div class="el-input el-input--small el-input--suffix"
           @mouseover="close = true"
           @mouseleave="close = false">
        <input v-model="chooseName"
               type="text"
               ref="myInput"
               autocomplete="off"
               :placeholder="placeholder"
               class="el-input__inner click-hidden"
               :readonly="chooseId ? true : false"
               :style="disabled ? disAbleStyle : enAbleStyle"
               @input="searchItem($event)"
               v-clickoutside="handleClose" />
        <span class="el-input__suffix">
          <span class="el-input__suffix-inner">
            <i class="el-select__caret el-input__icon el-icon-circle-close"
               v-if="close && chooseId && !disabled"
               @click.stop="remove"></i>
            <i v-else
               class="el-select__caret el-input__icon el-icon-arrow-up"></i>
          </span>
        </span>
      </div>
      <div v-show="showItem"
           class="el-select-dropdown el-popper"
           style="min-width: 196px; transform-origin: center bottom; z-index: 2237; position: absolute;"
           x-placement="bottom-start">
        <div v-show="list.length > 0"
             class="el-scrollbar"
             style="">
          <div ref="dropDownWrap"
               class="el-select-dropdown__wrap el-scrollbar__wrap"
               style="margin-bottom: -17px; margin-right: -17px;">
            <ul ref="dropDownList"
                class="el-scrollbar__view el-select-dropdown__list">
              <li>
                <ul class="el-select-group">
                  <li class="el-select-dropdown__item"
                      v-for="(items, index) in list"
                      :key="index"
                      @click.stop="choose(items)">
                    <span> {{ items[optionName] }}</span>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <div class="
                      el-scrollbar__bar
                      is-horizontal">
            <div class="el-scrollbar__thumb"
                 style="transform: translateX(0%);"></div>
          </div>
          <div ref="scrollBar"
               class="el-scrollbar__bar is-vertical">
            <div class="el-scrollbar__thumb"
                 :style="scrollBarStyle"></div>
          </div>
        </div>
        <p v-show="list.length < 1"
           class="el-select-dropdown__empty">
          无数据
        </p>
        <!---->
        <div x-arrow=""
             class="popper__arrow"
             style="left: 35px;"></div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
const clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e)
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = documentHandler
    document.addEventListener('click', documentHandler)
  },
  update() { },
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  }
}
export default {
  directives: { clickoutside },
  name: "SelectPage",
  props: {
    data: {
      type: [Object, Array],
      default: () => {
        return [];
      }
    },
    count: {
      type: Number,
      default: 0
    },
    placeholder: {
      type: String,
      default: "请选择"
    },
    multiple: {
      type: Boolean,
      default: false
    },
    selected: {
      type: String,
      default: ""
    },
    pageSize: {
      type: Number,
      default: 10
    },
    id: {
      type: Number | String,
      default: undefined
    },
    name: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    widthData: {
      type: String,
      default: "160px"
    },
    optionName: {
      type: String,
      default: "name"
    }
  },
  data() {
    return {
      scrollBarStyle: {
        transform: "translateY(0%)",
        height: "0%"
      },
      disAbleStyle: {
        backgroundColor: " #F5F7FA",
        borderColor: "#E4E7ED",
        color: "#C0C4CC",
        cursor: "not-allowed",
        width: "160px"
      },
      enAbleStyle: {
        width: "160px"
      },
      list: [],
      status: 0,
      addableStatus: true,
      page: 1,
      close: false,
      chooseId: undefined,
      chooseName: "",
      showItem: false,
      reset: false
    };
  },
  computed: {},
  created() {
    this.disAbleStyle.width = this.widthData;
    this.enAbleStyle.width = this.widthData
  },
  mounted() {
    this.box = this.$refs.dropDownWrap;
    var $this = this;
    // 监听这个dom的scroll事件
    this.box.onscroll = () => {
      this.scrollBarStyle.transform =
        "translateY(" +
        parseFloat(
          (event.target.scrollTop /
            (event.target.scrollHeight - event.target.clientHeight)) *
          100
        ).toFixed(2) +
        "%)";
      let scrollBottom =
        event.target.scrollHeight -
        event.target.scrollTop -
        event.target.clientHeight;
      if (scrollBottom === 0 && this.addableStatus && !this.chooseId && !this.reset) {
        this.page += 1;
        this.addableStatus = false;
        $this.handleScroll();
      }
    };
  },
  watch: {
    data(val) {
      this.list = val;
      if ((this.count / this.pageSize) > this.page) {
        this.addableStatus = true;
      }
      this.$nextTick(() => {
        this.scrollBarStyle.height =
          parseFloat(
            (this.$refs.dropDownWrap.clientHeight /
              this.$refs.dropDownList.clientHeight) *
            100
          ).toFixed(2) + "%";
      });
    },
    id: {
      handler(newName, oldName) {
        this.chooseId = newName;
        this.showItem = false;
      },
      immediate: true
    },
    name: {
      handler(newName, oldName) {
        this.chooseName = newName;
      },
      immediate: true
    }
  },
  methods: {
    open() {
      if (this.disabled || this.chooseId) {
        return false
      } else {
        this.reset = false;
        if (!this.chooseName && this.page === 1) {
          this.$emit("getList", this.page, this.chooseName);
          this.showItem = true;
        }
      }
    },
    handleClose(e) {
      if (!this.chooseId) {
        this.chooseName = ""
      }
      this.reset = true;
      this.$refs.dropDownWrap.scrollTo(0, 0)
      this.page = 1;
      this.showItem = false
    },
    remove() {
      this.chooseId = undefined;
      this.chooseName = "";
      this.$emit("remove");
    },
    handleScroll() {
      if (!this.reset) {
        this.$emit("addList", this.page, this.chooseName);
      }
    },
    choose(data) {
      this.page = 1;
      this.$refs.dropDownWrap.scrollTo(0, 0)
      this.$emit("choose", data);
      this.chooseId = data.id;
      this.chooseName = data[this.optionName];
      this.showItem = false;
    },
    searchItem(even) {
      // 查询符合条件的选项
      if (!this.chooseId && !even.isComposing) {
        this.page = 1;
        this.$refs.dropDownWrap.scrollTo(0, 0)
        this.$emit("getList", this.page, this.chooseName);
      }
    }
  }
};
</script>
